<template>
	<view class="page-wrap">
		<view style="background-color: #fff;" :style="'height:' +StatusBar+ 'px'"></view>
		<view class="page-nav" style="background-color: #fff;" :style="'height:' +StatusBar+ 'px'"></view>
		<view class="header-wrap">
			<view class="header-banner">
				<swiper class="swiper" circular :autoplay="true" style="height: 206rpx;">
					<swiper-item>
						<view class="swiper-img">
							<image src="/static/transaction/firmOffer/banner.png" class="img-full"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="page-tabs">
				<view class="tab" :class="{'active': tabIndex === 1}" @click="switchTabIndex(1)">
					实盘
				</view>
				<view class="tab" :class="{'active': tabIndex === 2}" @click="switchTabIndex(2)">
					模拟
				</view>
			</view>
			<view class="account">
				<view class="account-left">
					<view class="account-logo">
						<image src="/static/transaction/firmOffer/logo.png" class="img-full"></image>
					</view>
					<view class="account-name">
						<view class="account-name-text">
							兴业期货_CTP(主席)
						</view>
						<view class="account-number">
							交易账号 ***5308
						</view>
					</view>
				</view>
				<view class="account-right">
					<view class="account-right-text">
						切换账户
					</view>
					<uni-icons type="right" size="20" color="#D0D0D0"></uni-icons>
				</view>
			</view>
			<view class="data-overview">
				<view class="data-overview-item">
					<view class="data-overview-number">
						<template v-if="showNum">
							<view class="num">
								000
							</view>
							<uni-icons type="eye" size="20" @click="showNum = !showNum"></uni-icons>
						</template>
						<template v-else="showNum">
							<view class="num">
								***
							</view>
							<uni-icons type="eye-slash" size="20" @click="showNum = !showNum"></uni-icons>
						</template>
					</view>
					<view class="data-overview-name">
						<view class="text">
							当前权益
						</view>
					</view>
				</view>
				<view class="data-overview-item">
					<view class="data-overview-number">
						<view class="num">
							305
						</view>
					</view>
					<view class="data-overview-name">
						<view class="text">
							逐笔盈亏
						</view>
						<view class="table">
							账户分析
						</view>
					</view>
				</view>
				<view class="data-overview-item">
					<view class="data-overview-number">
						<view class="num">
							0.00
						</view>
					</view>
					<view class="data-overview-name">
						<view class="text">
							可用资金
						</view>
						<view class="table">
							转账
						</view>
					</view>
				</view>
				<view class="data-overview-item">
					<view class="data-overview-number">
						<view class="num">
							0.00%
						</view>
					</view>
					<view class="data-overview-name">
						<view class="text">
							资金使用率
						</view>
						<view class="data-overview-name-icon">
							<image src="/static/transaction/firmOffer/explain.png" class="img-full"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="main-menu">
				<view class="menu-item" v-for="(item, i) in mainMenu" :key="i">
					<view class="menu-icon">
						<image :src="item.icon" class="img-full"></image>
					</view>
					<view class="menu-text">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<view class="secondary-menu">
			<view class="secondary-menu-item" v-for="(item, i) in secondaryMenu" :key="i">
				<view class="secondary-menu-icon">
					<image :src="item.icon" class="img-full"></image>
				</view>
				<view class="secondary-menu-naem">
					<view class="secondary-menu-name-text">
						{{item.text}}
						<uni-icons type="right" size="16" color="#9D9D9D"></uni-icons>
					</view>
					<view class="secondary-menu-describe">
						{{item.describe}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 1,
				showNum: true,
				mainMenu: [
					{
						text: '下单',
						icon: require('@/static/transaction/firmOffer/menu1.png')
					},{
						text: '撤单/改价',
						icon: require('@/static/transaction/firmOffer/menu2.png')
					},{
						text: '当日委托',
						icon: require('@/static/transaction/firmOffer/menu3.png')
					},{
						text: '当日成交',
						icon: require('@/static/transaction/firmOffer/menu4.png')
					}
				],
				secondaryMenu: [
					{
						text: '云条件单',
						icon: require('@/static/transaction/firmOffer/secondary1.png'),
						describe: '云端监控 自动委托'
					},{
						text: '止盈止损',
						icon: require('@/static/transaction/firmOffer/secondary2.png'),
						describe: '云端监控 自动委托'
					},{
						text: '银期转账',
						icon: require('@/static/transaction/firmOffer/secondary3.png'),
						describe: '银行转钱到账户'
					},{
						text: '账户分析',
						icon: require('@/static/transaction/firmOffer/secondary4.png'),
						describe: '多维度分析报告'
					},{
						text: '账单查询',
						icon: require('@/static/transaction/firmOffer/secondary5.png'),
						describe: '查看当日/月结算单'
					},{
						text: '公告通知',
						icon: require('@/static/transaction/firmOffer/secondary6.png'),
						describe: '期货公司的通知'
					},{
						text: '交易设置',
						icon: require('@/static/transaction/firmOffer/secondary7.png'),
						describe: '交易个性化设置'
					},{
						text: '期货监控中心',
						icon: require('@/static/transaction/firmOffer/secondary8.png'),
						describe: '中国期货市场监控中心'
					}
				]
			};
		},
		methods: {
			switchTabIndex(i) {
				console.log(i)
				this.tabIndex = i
				this.$emit('switchPage', i)
			}
		}
	}
</script>

<style lang="scss">
	.page-wrap {
		padding-bottom: 200rpx;
	}
	.header-wrap {
		background-color: #fff;
		border-top: 1rpx solid #fff;
		padding-bottom: 24rpx;
	}
	.page-nav {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100vw;
		z-index: 9;
	}

	.header-banner {
		width: 702rpx ;
		height: 206rpx;
		margin: 24rpx;
		box-sizing: border-box;
		.swiper-img {
			width: 702rpx ;
			height: 206rpx;
		}
	}
	.page-tabs {
		width: 702rpx;
		height: 80rpx;
		border-radius: 44rpx;
		border: 2rpx solid #F4F5F7;
		display: flex;
		align-items: center;
		justify-content: space-between;
		overflow: hidden;
		margin: 24rpx;
		.tab {
			width: 342rpx;
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			line-height: 80rpx;
			text-align: center;
			color: rgba(0,0,0,0.8);
			&.active {
				background: #EE5953;
				color: #ffffff;
			}
		}
	}
	
	.account {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		.account-left {
			display: flex;
			align-items: center;
			.account-logo {
				width: 112rpx;
				height: 112rpx;
			}
			.account-name {
				display: flex;
				flex-direction: column;
				justify-content: center;
				.account-name-text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
				.account-number {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.4);
				}
			}
		}
		.account-right {
			display: flex;
			align-items: center;
			.account-right-text {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.4);
				margin-right: 10rpx;
			}
		}
	}
	.data-overview {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 62rpx;
		.data-overview-item {
			width: 50%;
			margin-top: 24rpx;
			.data-overview-number {
				display: flex;
				align-items: center;
				.num {
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					color: #EE5953;
				}
			}
			.data-overview-name {
				display: flex;
				align-items: center;
				margin-top: 8rpx;
				.text {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.8);
				}
				.table {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #356FE5;
					padding: 0 8rpx;
					border-radius: 8rpx;
					border: 2rpx solid #356FE5;
					margin-left: 8rpx;
				}
				.data-overview-name-icon {
					width: 46rpx;
					height: 46rpx;
					margin-left: 8rpx;
				}
			}
		}
	}
	.main-menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 32rpx;
		padding: 0 62rpx;
		.menu-item {
			.menu-icon {
				width: 94rpx;
				height: 94rpx;
			}
			.menu-text {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: rgba(0,0,0,0.8);
				text-align: center;
				margin-top: 16rpx;
			}
		}
	}
	
	.secondary-menu {
		background-color: #fff;
		padding: 26rpx 32rpx;
		margin-top: 24rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.secondary-menu-item {
			display: flex;
			align-items: center;
			width: 50%;
			margin-top: 26rpx;
			.secondary-menu-icon {
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}
			.secondary-menu-naem {
				.secondary-menu-name-text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: rgba(0,0,0,0.8);
				}
				.secondary-menu-describe {
					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: rgba(0,0,0,0.4);
					margin-top: 8rpx;
				}
			}
		}
	}
</style>